<template>
  <el-dialog :title="options.title" :visible.sync="options.dialogVisible" width="80%" top="5vh" @close="handleClose">
    <div class="preview-container">
      <iframe 
      ref="sandboxIframe"
      :srcdoc="this.options.dynamicHtml"
      sandbox="allow-scripts allow-same-origin allow-forms allow-modals allow-popups"
      class="iframe-sandbox" @load="onLoadHandler"
    ></iframe>
      <!-- 加载状态 -->
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="options.dialogVisible = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Prop, Vue ,Ref} from 'vue-property-decorator';

@Component({
  components: {}
})
export default class ExecuteDialog extends Vue {
  @Prop({ required: true }) options!: any;
  @Ref("sandboxIframe") sandboxIframe;

  loading = true;
  textContent = '';

  // async loadIframeContent() {

  //   this.sandboxIframe.load = () => {
  //     const iframeDoc = this.sandboxIframe.contentDocument;
  
  //     // 写入内容
  //     iframeDoc.open();
  //     iframeDoc.write(this.options.dynamicHtml);
  //     iframeDoc.close();
  //   };
  // }

  onLoadHandler(iframe){
      // 写入内容
     console.log(iframe.target)
  }



  handleClose() {
    this.textContent = '';
    this.loading = false;
  }
}
</script>

<style scoped>
.preview-container {
  position: relative;
  height: 70vh;
  min-height: 400px;
}

.loading-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #666;
}

.preview-content {
  width: 100%;
  height: 100%;
  border: none;
  margin-right: 10px;
}

.text-preview {
  white-space: pre-wrap;
  padding: 0px;
  font-family: monospace;
  overflow: auto;
  background: #f8f8f8;
  border-radius: 4px;
}

.office-iframe {
  min-height: 600px;
}

.unsupported-type {
  text-align: center;
  padding: 40px 0;
}

.unsupported-type p {
  margin-bottom: 20px;
  color: #666;
}
.iframe-sandbox{
  width: 100%;
  height: 100%;
}
</style>